<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/marquee.css">
</head>
<body>
    <!-- <marquee>我要好好努力</marquee> -->
    <div class="marquee">
        <div class="content">
            <div class="list"><img src="../i/1.jpg" alt=""></div>
            <div class="list"><img src="../i/2.jpg" alt=""></div>
            <div class="list"><img src="../i/3.jpg" alt=""></div>
        </div>
    </div>
</body>
<script src="../js/jquery-2.1.1.min.js"></script>
<script>
    $(() =>{
        console.log('页面加载完')
        var style = document.styleSheets[0]
        var outerWidth = 800,
            outerHeight = 800,
            speed = 3
        var $marquee = $('.marquee')
        var $content = $marquee.find('.content')
        var $list = $content.find('.list')
        var listLength = $list.length
        var contentWidth = outerWidth*listLength
        $marquee.css({
            "width":`${outerWidth}px`,
            "height":`${outerHeight}px`
        })
        $list.css({
            "width":`${contentWidth}px`,
            "height":`${outerHeight}px`,
            "animation":`run ${speed*listLength}s linear infinite`
        })
    //     style.insertRule(`
    //     @keyframes run {
    //         100% {
    //             transform: translateX(-${contentWidth}px);
    //         }
    //     }
    // `)
    })
</script>
</html>